<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>线段</title>
	</head>
	<body>
		<canvas id="c1" width="500" height="500"></canvas>
		<script>
			var c1 = document.getElementById('c1');
			var ctx = c1.getContext('2d');
			
			// 设置绘制的起点
			ctx.moveTo(20,20);
			// 设置经过某个位置
			ctx.lineTo(20,300);
			ctx.lineTo(300,20);
			ctx.lineTo(300,300);
			
			// 设置结束路径
			ctx.closePath();
			
			console.log(ctx);
			// 绘制路径
			ctx.lineCap = 'round';//起始路径线段的边缘设置为圆角
			// ctx.lineJoin = 'round';//两条线相交的拐角设置为圆角
			ctx.miterLimit = 2;//裁去折现尖角
			ctx.lineWidth = '20';
			ctx.strokeStyle = 'pink';
			ctx.stroke();
		</script>
	</body>
</html>
